<template>
  <move-dialog :visible="show" :before-close="closeDialog" :close-on-click-modal="false" width="480px" title="下载">
    <ul class="clearfix">
      <li v-for="item in downloadList" :key="item.url" class="filed-list fl clearfix">
        <icon-svg icon-class="yasuobao" class="fl file-icon" />
        <div class="fl file-detail">
          <div class="file-name">{{ item.name }}</div>
          <span class="file-size">{{ item.size }}&nbsp;/&nbsp;</span>
          <a :href="item.url + '?name=' + item.name" target="_blank" download>下载</a>
        </div>
      </li>
    </ul>
    <template #footer>
      <el-button link @click="closeDialog">取消</el-button>
    </template>
  </move-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import moveDialog from '@/common/components/move-dialog/index.vue'
export default defineComponent({
  name: 'multiFiledDialog',
  components: { moveDialog },
  setup() {
    const STATE = reactive({
      show: false,
      downloadList: []
    })
    const closeDialog = () => {
      STATE.show = false
    }
    // 由父级调用，传递多文件下载的列表
    const setDialogData = (data: any) => {
      debugger
      STATE.show = true
      STATE.downloadList = data || []
    }
    return {
      ...toRefs(STATE),
      closeDialog,
      setDialogData
    }
  }
})
</script>

<style lang="stylus" scoped>
  .filed-list
    width 200px
    height 60px
    background #fff
    border 1px solid $border-main
    box-shadow 0px 2px 8px 0px #edf1f5
    border-radius 10px
    margin-bottom 16px
    padding 0 16px
  .fl
    float left
  .file-icon
    font-size 30px
    margin-top 15px
  .file-detail
    margin 15px 0 0 10px
    font-size 12px
  .file-name
    margin-bottom 6px
    max-width 9em
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  .file-size
    color $fc-gray3
.filed-list:nth-child(2n)
  margin-left 24px
</style>
